<template>
<div style="display: inline-block;">
    <svg class="svg-icon" aria-hidden="true" :style="{fill: color,width: width,height: height}">
        <use :xlink:href="iconName"></use>
    </svg>
    <slot></slot>
</div>
</template>

<script>
export default {
    name: "icon-svg",
    props: {
        iconClass: {
            type: String,
            required: true
        },
        color: {
            type: String,
            default: 'white',
        },
        height: {
            type: String,
            default: '13px',
        },
        width: {
            type: String,
            default: '13px',
        },
    },
    computed: {
        iconName() {
            return `#icon-${this.iconClass}`;
        }
    }
};
</script>

<style>
.svg-icon{
  /* fill: red; */
  /* width: 20px;
  height: 20px;; */
}
</style>
